

import { PageProps } from "@/interfaces/app.interface"
import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react'
import style from './index.less'
import Login from './login'
import Register from './register'
import Forget from './forget'
import ls from '@/utils/ls.func'
import { useHistory } from 'umi'
import {getUser} from '@/api'



const Head = (props : { status: number, per: any, id: string }) => {
    const history = useHistory()
    let [type, setType] = useState('')
    let [token, setToken] = useState(ls.getItem('user'))
    let [user, setUser] = useState<obj>({})
    let nav = [{txt: '首页', url: '/index.html'}]
    let per = props.per
    if (per && per.length) {
        if (per[7].isDel === 0) {
            nav.push({txt: '线上云展', url: '/model/detail.html'})
        }
        if (per[4].isDel === 0) {
            nav.push({txt: '精彩瞬间', url: '/life.html'})
        }
        if (per[5].isDel === 0) {
            nav.push({txt: '新闻资讯', url: '/news.html'})
        }
    }

    const dialog = (type: string) => () => setType(type)
  
    const exit = () => {
        ls.removeItem('user')
        setToken('')
    }

    const tab = (url: string) => () => {
        let suffix = ''
        if (props.id) {
            suffix = '?i=' + props.id
        }
        history.push(url + suffix)
    }

    const custom = useMemo(() => {
        switch (type) {
            case 'register':
                return <Register cb={setType} />
            case 'login':
                return <Login cb={setType} />
            case 'forget':
                return <Forget cb={setType} />
            case 'success':
                setToken(ls.getItem('user'))
                break;
        }
    }, [type])

    useEffect(() => {
        if (token) {
            getUser().then(res => {
                setUser(res)
            })
        }
    }, [token])


    return (
        <header>
            <div className={style.header}>
                <div className={`flex wrap ${style.head}`}>
                    <div className="flex-center" onClick={tab('/index.html')}>
                        <img src={require('@/assets/img/logo.png')} alt="" />
                    </div>
                            <ul className={`flex ${style.nav}`}>
                                {nav.map((item, i) => {
                                    return <li onClick={tab(item.url)} className={props.status == i ? style.on : ''} key={i}>{item.txt}</li>
                                })}
                            </ul>
                            {
                                token ? 
                                <>
                                    <div className={` ${style.user}`}>
                                        <div className={`flex-center ${style.avatar}`}>
                                        <img src={user.headimgurl ? user.headimgurl : require('@/assets/img/avatar.png')} alt=""/>
                                        </div>
                                       
                                        <ul className={style.ul}>
                                            <li>个人中心</li>
                                            <li onClick={exit}>退出</li>
                                        </ul>
                                    </div>
                                </>
                                :
                                <div className={`flex ${style.user}`}>
                                    <div onClick={dialog('register')}>注册</div>
                                    <span>/</span>
                                    <div onClick={dialog('login')}>登录</div>
                                </div>
                            }
                </div>
                {
                    custom ? <div className="mask" >{custom}</div> : null
                }
            </div>
        </header>
    )
}


export default (props : { status: number, per: any, id: string }) => {

    return useMemo(() => {
        return <Head status={props.status} per = {props.per} id={props.id}/>
    }, [props.status, props.per, props.id])


}










